<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>  

<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>

<%@ page isELIgnored="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>同乐吧--我给别人的留言</title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<link href="css/public_ac.css" rel="stylesheet" type="text/css" />
		<link href="css/column_ac.css" rel="stylesheet" type="text/css" />
		<link href="css/header.css" rel="stylesheet" type="text/css" />
		<link href="css/footer.css" rel="stylesheet" type="text/css" />
<link href="css/comment.css" rel="stylesheet" type="text/css" />
<script src="dwr/interface/LeaveMessageAction.js"></script>
<script src="dwr/engine.js"></script> 
<script src="dwr/util.js"></script>
		
<script type="text/javascript" charset="utf-8">

			function show(id){
				var item = document.getElementById("ul" + id);
				if(item.lastChild){
					if(item.childNodes.length > 2){
						//var firstItem = item.firstChild;
						//alert(firstItem.style.dispaly)
						//firstItem.style.dispaly = "block";
						//alert(firstItem.style.dispaly)
						var firstItem = item.firstChild;
						firstItem.style.display = "block";
					}
					if(item.childNodes.length > 1){
						var lastItem = item.lastChild;
						
						lastItem.style.display = "block";
						
					}
				}
			}
			
			
			
			function showAll(item){
				var next = item;
				next.style.display = "none";
				while(next.nextSibling) {
					next = next.nextSibling;
					next.style.display = "block";
				}
			}
			
			
			function reply(){
				var reply_content = DWRUtil.getValue("reply_content");
				var leaveMessageId = DWRUtil.getValue("leaveMessageId");
				var replyMessage = {leaveMessageId:leaveMessageId, content:reply_content};
				
				LeaveMessageAction.replyMessage(replyMessage, replyCallBack);
			}
			
			function replyCallBack(data) {
				var liItem = document.createElement("li");
				var str = "<a href=\"user.do?uid=\"" + data.replyUserNo + "\">" + data.replyUserName + "</a><br/><pre>" + data.content + "</pre><br/>" + data.time.toLocaleString();
				liItem.innerHTML = str;
				liItem.style.display = "block";
				var ul = document.getElementById("ul" + data.leaveMessageId)
				ul.appendChild(liItem);
				hideReplyBox();
			}
			
			
			
			function deleteById(id){
				LeaveMessageAction.deleteLeaveMessage(id, deleteCallBack);
				
				
			}
			
			function deleteCallBack(data){
				alert("删除成功");
				var theItem = document.getElementById("table" + data);
				var parent = theItem.parentNode;
	
				parent.removeChild(theItem);
			}
			
			function showReplyBox(id) {
				var div=document.getElementById('reply_box_'+id);
				var default_div = document.getElementById('default_reply_box');
				document.getElementById("leaveMessageId").value = id;
				document.getElementById("reply_content").value = "";
				div.appendChild(default_div);
				
				default_div.style.display = "";
			}
			function hideReplyBox(){
				var default_div = document.getElementById('default_reply_box');
				document.getElementById("leaveMessageId").value = "";
				document.getElementById("reply_content").value = "";
				default_div.style.display = "none";
			}

			function checkImg(id) {
				//var str = "sdfsd[img]http://localhost:8090/wanjia/album_images/a286d8fa-1c1c-4830-9fc5-fac8cb83e91f.jpg[/img]sdfs[img]sdfsf.jpg[/img]sdf[img]aaa.jpg[/img]";
				var str = document.getElementById(id).value;
				var array = str.match(/(\[img\][^\[]+\[\/img\])/);
				while(array != null) {
			
			
					var string = array[0];
					string = string.substring(string.indexOf("[img]") + 5, string.indexOf("[/img]"));
					var image = new Image();
					image.src = string;
					if(image.width > 100) {
						alert("请不要使用宽度超过100的网络图片");
						return false;
					}
					str = str.substring(str.indexOf(string) + string.length + 6, str.length);
					array = str.match(/(\[img\][^\[]+\[\/img\])/);
					//alert(str);
				}
				
				return true;
			}
</script>
<style>
#leave .ul .check{ 
	cursor: pointer; 
} 
		
#leave .ul li{ 
	display:none; 
	border-bottom:1px solid red; 
	width:400px; 
	padding-top:10px;
}
</style>

	</head>
	<body class="body">
		<div class="pageContent">
		
			<jsp:include flush="true" page="../include/header.jsp"></jsp:include>
			
			<!-- 页面主内容 -->
			<div class="main">
			 
				<!-- 页面左侧内容 -->
				<div class="mainLeft">
					
					<!-- 左侧栏目1 -->
					<div class="columnType1">
						<div class="columnType1Title">
							<div class="columnType1TitlePic">
								<img src="theme/skin1/public/columnPic/01.gif"/>
							</div>
							<div class="columnType1TitleText">
								我的留言和评论
							</div>
							<div class="columnType1TitleMore">
								<!-- 这里是更多链接，不需要请删除该链接 -->
								<!-- 
									<a href=""><img src="theme/skin1/public/more1.gif" border="0"/></a>
								 -->
							</div>
						</div>
						<div class="columnType1Content" style="background:#000;">
							<div id="at">
							<ul>
				        	  <li><a href="leave.do?method=receive">留言</a></li>
				        	  <li><a href="comment.do?method=allReceive">评论</a></li>
				   	    	</ul>
   	    					</div>
						</div>
					</div>
					
					
				</div>
				
				<!-- 页面中间内容 -->
				<div class="mainContent" style="width:780px;">
					
					<!--  中间栏目1 -->
					<div class="columnType2" style="width:780px;">
						<div class="columnType2Title">
							<div class="columnType2TitlePic">
								<img src="theme/skin1/public/columnPic/04.gif"/>
							</div>
							<div class="columnType2TitleText">
								我的留言
							</div>
							<div class="columnType1TitleMore">
								<!-- 这里是更多链接，不需要请删除该链接 -->
								<!-- 
									<a href=""><img src="theme/skin1/public/more1.gif" border="0"/></a>
								 -->
							</div>
						</div>
						<div class="columnType2Content" style="width:780px;background:#000;">
						
						
						
							<div class="sidebar clear" style="width:780px;">
					<div id="myTabs3" class="mootabs" style="margin-top:10px;">
						<ul class="mootabs_title">
							<li title="别人给我的留言" style="float:left;margin-left:10px;"><a href="leave.do?method=receive">别人给我的留言</a></li>
							<li title="我给别人的留言" style="cursor: default;color:#fff;float:left;margin-left:10px;font-size:14px;">我给别人的留言</li>
						</ul>
						<div style="clear:both;"></div>
						<div id="leave" class="mootabs_panel" style="display:block;">
							<c:forEach items="${requestScope.list}" var="data">
							<div id="table${data.id}" class="message-box">
								<h3><span class="right" style="margin-right:20px;">时间：<fmt:formatDate value="${data.time}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate></span><a href="${data.leaveUserNo }" style="margin-left:10px;">${data.leaveUserName}</a></h3>
								<table cellpadding="3" border="0" cellspacing="0" width="100%" class="message">
									
									<tr>
										<td class="message-face"><img src="upload/headphoto/${data.leaveUserPhoto}" /></td>
										<td valign="top" style="padding-top:20px;padding-left:20px;"><pre>${data.content}</pre>
											<ul id="ul${data.id}" class="ul" style="list-style: none;">
												<li class="check" onclick="showAll(this)">查看完整对话</li>
												<c:forEach items="${data.leaveMessageReply}"  var="reply">
												<li>
													<a href="user.do?uid=${reply.replyUserNo}"><c:out value="${reply.replyUserName}"/></a><span style="margin-left:30px;"><fmt:formatDate value="${reply.time}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate></span>
													<pre style="margin-top:5px;padding-left:10px;">${reply.content}</pre>
													
												</li>
												</c:forEach>
											</ul>
											<script>
												show(${data.id})
											</script>
										</td>
										<td class="message-action">
											<a href="javascript:showReplyBox(${data.id})">回复留言</a><br />
											<a href="#">加为好友</a><br />
											<a href="javascript:deleteById(${data.id})">删除留言</a><br />
											<a href="#">举报留言</a><br />
										</td>
									</tr>
									
									<tr>
										<td class="message-face"></td>
										<td valign="top" style="padding-top:20px;padding-left:20px;">
											<div id="reply_box_${data.id}"></div>
										</td>
										<td class="message-action"></td>
									</tr>
									
								</table>
								
							</div>
							
							</c:forEach>
							
							<div class="pager clear">
								<c:out value="${requestScope.url}" escapeXml="false"></c:out>
							</div>
						</div>
						
					</div>
				</div>
				
				
				
						</div>
					</div>
					
				</div>
				
				<!-- 页面右侧内容 -->
				
			</div>
			
			<jsp:include flush="true" page="../include/footer.jsp"></jsp:include>
				
		</div>
		

<div id="default_reply_box" style="display:none;margin-left:40px;">
            <input type="hidden" name="leaveMessageId" id="leaveMessageId"/>
            <div>回复留言：</div>
            <textarea id="reply_content" name="reply_content" style="width:300px;height:70px;"></textarea>
            <div>
            <input id="reply_button" type="button" style="cursor:pointer" value="回复留言" onclick="if(!checkImg('reply_content')){return false;} reply();" />&nbsp;
            <input type="button" style="cursor:pointer" value="取消" onclick="hideReplyBox()" />
            <span class="lyar">还可以输入<span id="contentSize">500</span>字</span>
            </div>
	</div>
	</body>
</html>